import React, { useState } from 'react'
import classnames from 'classnames'

import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
import { Channel } from '@/types/data'
import { addChannel, changeActive, delChannel } from '@/store/actions/home'
import { Toast } from 'antd-mobile'
type Props = {
  hide: () => void
}

const Channels = (props: Props) => {
  // 推荐频道
  const { userChannels, active } = useSelector((state: RootState) => state.home)
  const optionChannels = useSelector((state: RootState) => {
    // 推荐频道 = 所有频道 - 我的频道
    const { userChannels, allChannels } = state.home
    return allChannels.filter((item) => {
      const idx = userChannels.findIndex((v) => v.id === item.id)
      if (idx === -1) {
        return true
      } else {
        return false
      }
    })
  })
  // 编辑频道
  const [isEdit, setIsEdit] = useState(false)
  const changeIsEdit = () => {
    setIsEdit(!isEdit)
  }
  // 添加频道
  const dispatch = useDispatch()
  const addUserChannel = (channel: Channel) => {
    dispatch(addChannel(channel))
  }
  // 删除频道
  const delUserChannel = (id: string) => {
    if (isEdit) {
      // 做删除
      if (userChannels.length <= 4) {
        Toast.show({
          content: '再删就没了!!!'
        })
        return
      }
      dispatch(delChannel(id))
    } else {
      // 跳转
      props.hide()
      dispatch(changeActive(id))
    }
  }
  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={props.hide} />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', isEdit && 'edit')}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">点击进入频道</span>
            <span className="channel-item-edit" onClick={changeIsEdit}>
              {isEdit ? '完成' : '编辑'}
            </span>
          </div>
          {/* 这里放置我的频道 */}

          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {userChannels.map((item) => {
              return (
                <span
                  onClick={() => {
                    delUserChannel(item.id.toString())
                  }}
                  key={item.id}
                  className={classnames(
                    'channel-list-item',
                    item.id.toString() === active ? 'selected' : ''
                  )}>
                  {item.name}
                  {!['0', active].includes(item.id.toString()) && (
                    <Icon type="iconbtn_tag_close" />
                  )}
                </span>
              )
            })}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>

          {/* 这里放置推荐频道 */}
          <div className="channel-list">
            {optionChannels.map((item) => {
              return (
                <span
                  onClick={() => addUserChannel(item)}
                  key={item.id}
                  className="channel-list-item">
                  +{item.name}
                </span>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
